<template>
	<view class="app-container">
		
		<image class="logo" src="/static/logo.png"></image>
		
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
		indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#ffffff">
			<swiper-item v-for="(item,index) in banners" @click="pushDetail(item.url)" :key="'banner' + index">
				<image :src="item.src" class="banner" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<text class="activity-title">活动报道</text>
		<view class="activity-list">
			<view class="activity-item" v-for="(item,index) in activityList" :key="index+1" @click="pushDetail(item.id)">
				<image class="src" :src="item.src" mode="aspectFill"></image>
				<text class="title">{{item.title}}</text>
				<view class="time">{{item.time}}</view>
			</view>
		</view>
	</view>
	<entry-modal v-show="!isLogin" @close='checkLogin'></entry-modal>
	
</template>

<script>
	import { getBannerList, getHomeList, userLogin, getUserInfo } from '@/api/index.js'
	
	import entryModal from '@/components/entryModal.vue'
	import {config} from "@/utils/utils.js"
	
	export default {
		data() {
			return {
				page: 1,
				title: 'FAITH文武道',
				activityList: [],		
				banners: [],				
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				
				isLogin: true,//是否登录
			}
		},
		components: {
			entryModal
		},
		onLoad() {	
			this.checkLogin();
			this.getActivityList();
			this.getBanners();	
		},
		onPullDownRefresh() {
		  this.page = 1;
		  this.getActivityList();
		},
		onReachBottom() {
			 this.page += 1;
			 this.getActivityList();
		},
		methods: {
			checkLogin() {
				if(uni.getStorageSync(config.userInfo)) {
					this.isLogin = true;
					uni.showTabBar();	
				}else {
					this.isLogin = false;
					uni.hideTabBar();	
				}	
			},
			pushDetail(id) {
				if(id=='###') return;
				uni.navigateTo({
					url:'/pages/detail/detail?id=' + id
				})
			},
			getActivityList() {
			// 	this.activityList.push({id:1,title:'经典大师课来啦',src: "https://trip.chinahood.net/assets/wechaapp/images/activity1.png",time:"2024-06-03"})
			// 	this.activityList.push({id:2,title:'与大师共读一本书',src: "https://trip.chinahood.net/assets/wechaapp/images/activity2.png",time:"2024-06-06"})
			// 	this.activityList.push({id:3,title:'跨过山和大海，\n也穿越人山人海',src: "https://trip.chinahood.net/assets/wechaapp/images/activity3.png",time:"2024-06-06"})
			// 	this.activityList.push({id:4,title:'坚并肩，毅起GO',src: "https://trip.chinahood.net/assets/wechaapp/images/activity4.png",time:"2024-06-08"})
				getHomeList({page: this.page}).then(res=>{
					if(this.page > 1) {
						if(res.info) this.activityList = this.activityList.concat(res.info);
					}else {
						if(res.info) this.activityList = res.info;
						else this.activityList = [];
					}
					uni.stopPullDownRefresh();
				})
			},
			//获取banner信息
			getBanners() {
				// this.banners = [{
				// 	id: 1,
				// 	src: 'https://trip.chinahood.net/assets/wechaapp/images/home_banner.jpg',
				// },{
				// 	id: 2,
				// 	src: 'https://trip.chinahood.net/assets/wechaapp/images/home_banner_2.jpg'
				// }];
				
				getBannerList({}).then(res=>{
					this.banners = res.info;
				})
			}
		}
	}
</script>



<style lang="scss" scoped>
	.swiper {
		height: 64.66vw;
		width: 100%;
	}
	.swiper-item {
		display: block;
		text-align: center;
	}
	
	.app-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		width: 141rpx;
		height: 90rpx;
		margin: 90rpx auto 60rpx auto;
	}
	.banner {
		width: 100%;
		height: auto;	
	}
	.text-area {
		display: flex;
		justify-content: center;
	}

	.activity-title {
		font-size: 36rpx;
		// color: #8f8f94;
		text-align: left;
		padding: 50rpx 0 30rpx 50rpx;
		width: calc(100% - 50rpx);
	}
	.activity-list {
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
		// list-style-type:none;
		width: calc(100% - 40rpx);
		margin: 0 auto;
		.activity-item {
			width: calc(50% - 20rpx);
			margin-left: 10rpx;
			margin-right: 10rpx;
			margin:0 10rpx 58rpx 10rpx; 
			display: flex;
			flex-direction: column;
			.src {
				width: 100%;
				height: 325rpx;
				background-color: #80808033;
			}
			.title {
				font-size: 24rpx;
				line-height: 36rpx;
				color: rgb(51,51,51);
				margin: 20rpx 0;
				height: 72rpx;
				text-overflow: ellipsis;
				word-break: break-all;
				display: -webkit-box;
				-webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
				overflow: hidden!important;
		//根据样式设置
			}
			.time {
				font-size: 22rpx;
				letter-spacing: 0rpx;
				padding: 0 10rpx;
				width: 140rpx;
				height: 36rpx;
				line-height: 36rpx;
				background: #E6E6E6;
				color: #808080;
				text-align: center;
			}
		}
	}
</style>
